import React, { Component, PropTypes } from 'react';
import { Link } from 'react-router';
import Extensions from '@jenkins-cd/js-extensions';
import { ExpandablePath, Page, TabLink, WeatherIcon } from '@jenkins-cd/design-language';
import { AppConfig, ContentPageHeader, i18nTranslator, logging, NotFound, Paths, Security } from '@jenkins-cd/blueocean-core-js';
import { Icon } from '@jenkins-cd/design-language';
import { UrlBuilder } from '@jenkins-cd/blueocean-core-js';
import { documentTitle } from './DocumentTitle';
import { observer } from 'mobx-react';
import { observable, action } from 'mobx';

const logger = logging.logger('io.jenkins.blueocean.dashboard.PipelinePage');

const RestPaths = Paths.rest;

const classicConfigLink = pipeline => {
    let link = null;
    if (Security.permit(pipeline).configure()) {
        link = (
            <a href={UrlBuilder.buildClassicConfigUrl(pipeline)} title={webTranslate('toast.configure', { defaultValue: 'Configure' })} target="_blank">
                <Icon size={24} icon="ActionSettings" style={{ verticalAlign: 'baseline' }} />
            </a>
        );
    }
    return link;
};

const translate = i18nTranslator('blueocean-dashboard');
const webTranslate = i18nTranslator('blueocean-web');

@observer
export class PipelinePage extends Component {
    componentWillMount() {
        this._handleParams(this.props.params);
    }

    componentWillReceiveProps(nextProps) {
        if (nextProps.params !== this.props.params) {
            this._handleParams(nextProps.params);
        }
    }

    _handleParams(params) {
        if (params) {
            this.href = RestPaths.pipeline(params.organization, params.pipeline);
            this.context.pipelineService.fetchPipeline(this.href, { useCache: true }).catch(err => this._setError(err));
        } else {
            this.href = null;
        }
    }

    @observable error;

    @action
    _setError(error) {
        this.error = error;
    }

    render() {
        const pipeline = this.context.pipelineService.getPipeline(this.href);

        const { setTitle } = this.props;
        const { location = {} } = this.context;

        const { organization, name, fullName, fullDisplayName } = pipeline || {};

        const organizationName = organization || AppConfig.getOrganizationName();
        const organizationDisplayName = organization === AppConfig.getOrganizationName() ? AppConfig.getOrganizationDisplayName() : organization;

        const orgUrl = UrlBuilder.buildOrganizationUrl(organizationName);
        const activityUrl = UrlBuilder.buildPipelineUrl(organizationName, fullName, 'activity');
        const isReady = !!pipeline;

        if (!pipeline && this.error) {
            logger.log(`Error finding pipeline page for ${fullName}.`, this.error);
            return <NotFound />;
        }

        if (isReady) {
            setTitle(`${organizationDisplayName} / ${name}`);
        } else {
            setTitle(translate('common.pager.loading', { defaultValue: 'Loading...' }));
        }

        const baseUrl = UrlBuilder.buildPipelineUrl(organizationName, fullName);
        const trendsEnabled = AppConfig.isFeatureEnabled('trends');

        const pageTabLinks = [
            <TabLink to="/activity">{translate('pipelinedetail.common.tab.activity', { defaultValue: 'Activity' })}</TabLink>,
            <TabLink to="/branches">{translate('pipelinedetail.common.tab.branches', { defaultValue: 'Branches' })}</TabLink>,
            <TabLink to="/pr">{translate('pipelinedetail.common.tab.pullrequests', { defaultValue: 'Pull Requests' })}</TabLink>,
            trendsEnabled && <TabLink to="/trends">{translate('pipelinedetail.common.tab.trends', { defaultValue: 'Trends' })}</TabLink>,
        ];

        const pageHeader = isReady ? (
            <ContentPageHeader pageTabBase={baseUrl} pageTabLinks={pageTabLinks}>
                <WeatherIcon score={pipeline.weatherScore} />
                <h1>
                    {AppConfig.showOrg() && (
                        <span>
                            <Link to={orgUrl} query={location.query}>
                                {organizationDisplayName}
                            </Link>
                            <span>&nbsp;/&nbsp;</span>
                        </span>
                    )}
                    <Link to={activityUrl} query={location.query}>
                        <ExpandablePath path={fullDisplayName} hideFirst className="dark-theme" iconSize={20} />
                    </Link>
                </h1>
                <Extensions.Renderer extensionPoint="jenkins.pipeline.detail.header.action" store={this.context.store} pipeline={pipeline} />
                {classicConfigLink(pipeline)}
            </ContentPageHeader>
        ) : (
            <ContentPageHeader pageTabBase={baseUrl} pageTabLinks={pageTabLinks}>
                <h1>
                    <Link to={orgUrl}>{organizationDisplayName}</Link>
                    <span> / </span>
                </h1>
            </ContentPageHeader>
        );

        return (
            <Page>
                {pageHeader}
                {isReady && React.cloneElement(this.props.children, { pipeline, setTitle, t: translate, locale: translate.lng })}
            </Page>
        );
    }
}

PipelinePage.propTypes = {
    children: PropTypes.any,
    pipeline: PropTypes.any,
    params: PropTypes.object,
    setTitle: PropTypes.func,
};

PipelinePage.contextTypes = {
    config: PropTypes.object.isRequired,
    location: PropTypes.object,
    store: PropTypes.object,
    pipelineService: PropTypes.object,
};

export default documentTitle(PipelinePage);
